<template>
  <div class="analysisContainer h-flex" style="padding:10px;">
    <div class="h-flex-elastic" style="overflow: hidden;overflow-y:auto;">
      <div class="A6c-progress">
        <div v-for="val in planState" :key="val.code" class="item" :class="val.code>alldata.status?'bar-item-color':''">{{ val.label }}</div>
      </div>
      <div class="A6c-basic">
        <span class="title">基本信息</span>
        <div class="content">
          <p>
            <span><label>装置类型：</label> {{ alldata.cType }}</span>
            <span><label>检测开始日期：</label> {{ parseTime(alldata.detectStartDate, '{y}-{m}-{d}') }}</span>
            <span><label>检测结束日期：</label> {{ parseTime(alldata.detectEndDate, '{y}-{m}-{d}') }}</span>
            <span><label>里程数：</label> {{ alldata.mileage }}</span>
          </p>
          <p>
            <span><label>参与部门：</label> {{ alldata.deptAttr?alldata.deptAttr.deptName:"" }}</span>
            <span><label>负责人：</label> {{ alldata.detecthead }}</span>
            <span><label>车次：</label> {{ alldata.trainNum }}</span>
            <span><label>编制人：</label> {{ alldata.planUser }}</span>
          </p>
          <p>
            <span><label>状态：</label> {{ getstatus(alldata.status) }}</span>
            <span style="flex:3;"><label>备注：</label> {{ alldata.memo }}</span>
          </p>
        </div>
      </div>
      <div class="A6c-list h-flex">
        <div class="list-item">
          <span class="title">线路信息</span>
          <div class="list-table">
            <el-table
              :data="alldata.detectLineList"
              height="calc(100%)"
              border
              stripe>
              <el-table-column
                prop="lineAttr.lineName"
                label="线路"
                sortable
                show-overflow-tooltip
                min-width="90"
                top
                align="center" />
              <el-table-column
                prop="directionAttr.directionName"
                label="行别"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="70" />
              <el-table-column
                prop="startSiteAttr.siteName"
                label="开始区站"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="120" />
              <el-table-column
                prop="endSiteAttr.siteName"
                label="结束区站"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="120" />
            </el-table>
          </div>

        </div>
        <div class="list-item">
          <span class="title">计划接收信息</span>
          <div class="list-table">
            <el-table
              :data="alldata.deptList"
              height="calc(100%)"
              border
              stripe>
              <el-table-column
                prop="deptAttr.deptName"
                label="部门"
                sortable
                show-overflow-tooltip
                min-width="110"
                top
                align="center" />
              <el-table-column
                prop="receiveUser"
                label="接收人"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="80" />
              <el-table-column
                label="接收时间"
                show-overflow-tooltip
                align="center"
                sortable
                min-width="100">
                <template slot-scope="scope">
                  {{ parseTime(scope.row.receiveDate||"", '{y}-{m}-{d}') }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="A6c-fujian">
        <span class="title">附件</span>
        <div class="content">
          <el-table
            :data="alldata.planFileList"
            height="100%"
            border
            stripe>
            <el-table-column
              label="序号"
              sortable
              type="index"
              show-overflow-tooltip
              width="80"
              align="center" />
            <el-table-column
              label="操作"
              show-overflow-tooltip
              align="left"
              sortable
              min-width="70">
              <template slot-scope="scope">
                <el-popover v-if="isshow(scope.row.filePath)" trigger="hover" placement="top">
                  <div v-viewer="options">
                    <img
                      class="table-imghover"
                      :src="getRelativeImage(scope.row.filePath)"
                      :data-source="getcompressImage(scope.row.filePath)"
                      @error="handleImgError">
                  </div>
                  <!-- <img
                    class="table-imghover"
                    :src="getcompressImage(scope.row.filePath)"
                    @error="handleImgError"> -->
                  <div slot="reference" class="name-wrapper">
                    <a class="fujian-unline" @click="download(scope.row)">{{ scope.row.fileName }}（点击下载）</a>
                  </div>
                </el-popover>
                <a v-else class="fujian-unline" @click="download(scope.row)">{{ scope.row.fileName }}（点击下载）</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="A6c-right">
      <el-steps direction="vertical" space="130px" :active="alldata.planOperateRecordList?alldata.planOperateRecordList.length:0">
        <el-step v-for="(item,num) in alldata.planOperateRecordList" :key="num" :title="planState[num].label">
          <div slot="description">
            <p>时&nbsp;&nbsp;间：{{ parseTime(item.operateTime||"", '{y}-{m}-{d} {h}:{i}:{s}') }}</p>
            <p>操作人：{{ item.operateUser }}</p>
            <p>结&nbsp;&nbsp;果：{{ item.operateResult }}</p>
            <p>备&nbsp;&nbsp;注：{{ item.memo }}</p>
          </div>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getToken } from '@/utils/auth'
import { download } from '@/api/dsc/main'
export default {
  name: 'Analysis6C',
  components: {
  },
  data() {
    return {
      options: { url: 'data-source' },
      parseTime: parseTime,
      alldata: { status: 0 },
      planState: [{ label: '编制', code: '0' }, { label: '已提交', code: '1' },
        { label: '已审批', code: '2' }, { label: '退回', code: '3' }, { label: '已发布', code: '4' }, { label: '已执行', code: '5' },
        { label: '分析中', code: '6' }, { label: '已分析', code: '7' }
      ]
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    getstatus(num) {
      for (const item of this.planState) {
        if (Number(item.code) === num) {
          return item.label
        }
      }
      return ''
    },
    getList(val) {
      this.alldata = val
    },
    // 附件图片可以预览
    isshow(url) {
      var val = url.substring(url.length - 3, url.length)
      if (val === 'jpg' || val === 'png') {
        return true
      } else {
        return false
      }
    },
    // 查看图片
    getcompressImage(url) {
      return process.env.VUE_APP_BASE_API +
        '/dfile/file/download?fileUrl=' + url +
        '&access_token=' + getToken()
    },
    // 下载图片
    download(val) {
      var obj = {
        url: '/dfile/file/download?fileUrl=' + val.filePath,
        fileName: val.fileName
      }
      return download(obj.url).then((res) => {
        const eleLink = document.createElement('a')
        eleLink.download = val.fileName
        var blob = new Blob([res])
        eleLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.A6c-progress{
    height: 40px;
    background-color: #64BD2E;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    display: flex;

  .item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
}
  .item:not(:last-child):before {
    content: " ";
    display: inline-block;
    height: 35px;
    width: 35px;
    border-width: 5px 5px 0 0;
    border-color: #fff;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 7%;
    margin-top: 0;
    right: 0;
    z-index: 2;
}
.bar-item-color {
    background: #f3f3f3;
    color: #808080;
    position: relative;
    border-radius: 0 5px 5px 0;
}
.bar-item-color:after {
    content: " ";
    bottom: 0;
    left: -17px;
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: #f3f3f3 transparent #f3f3f3 transparent;
}

}
.A6c-basic{
  position: relative;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  width: 100%;
  height: 160px;
  padding: 20px 2%;
  margin-top: 24px;
  .content{
    overflow-x: scroll;
  }
  p{
    display: flex;
    height: 40px;
    line-height: 40px;
    color: #444;
    font-size: 14px;
    span{
      flex: 1;
      min-width: 200px;
      display: inline-block;
      overflow: hidden;
      width: 100px;
      label{
        font-weight: normal;
      }
    }
  }
}
.A6c-list{
  height: calc(76% - 300px);
  width: 100%;
  min-height: 160px;
  max-height: 340px;
  margin-top: 20px;
  .list-item{
    flex: 1;
    max-width: calc(50% - 5px);
    position: relative;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding-top: 16px;
    .list-table{
      height: 100%;
      width: 100%;
      overflow: hidden;
      overflow-x: auto;
    }

    .el-table{
      width: 100%;
    }
  }
  .list-item:not(:last-child){
    margin-right: 10px;
  }
}
.A6c-fujian{
    position: relative;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    width: 100%;
    min-height: 130px;
    height: 24%;
    max-height: 260px;
    padding-top: 16px;
    margin-top: 24px;
    .content{
      height: 100%;
    }
    .fujian-unline{
      text-decoration: underline;
      cursor: pointer;
    }
    .fujian-unline:hover{
      color:#409eff;
    }
  }
.A6c-right{
  min-width: 240px;
  width: 26%;
  max-height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  padding-left: 30px;
  font-size: 14px;
}
.title{
      position: absolute;
      z-index: 2;
      font-size: 14px;
      background: white;
      color: #444;
      padding:2px 4px;
      top: -12px;
      left: 20px;
    }
::v-deep .el-table{
  border:none;
  border-top: 1px solid #EBEEF5;
   th{
    background: white!important;
    color: #444;
    font-size: 14px;
  }
  .sort-caret.ascending{
    border-bottom-color:black;
  }
  .sort-caret.descending {
    border-top-color: black;
}
}
.table-imghover{
      height: 180px;
      width: 240px;
    }
::v-deep .el-step__description.is-finish{
  color: black;
  p{
    font-size: 14px;
  }
}
</style>
